<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>
<style>
  .continer{
    width: 1000px;
    margin: 20px auto;
  }
</style>
<body>
  <div id="root"></div>

  <script type="text/babel">
    let data = {
      title: '中纪委网站深度关注：“吴亦凡事件”暴露出的“饭圈”乱象，非整治不可',
      content: '累计清理负面有害信息15万余条，处置违规账号4000余个，关闭问题群组1300余个，解散不良话题814个，拦截下架涉嫌集资引流的小程序39款，专项排查整治网络综艺节目……日前，中央网信办、国家广播电视总局等相关主管部门整治不良粉丝文化工作的阶段性成效公布，引发社会广泛关注',
      image: 'https://img2.utuku.imgcdc.com/650x0/ent/20210829/2f23657a-bee9-4009-a2e1-ef092d831870.png'
    };
    let div=(
      <div className="continer">
        <div>
          <h2 style={{color:'red',fontSize:'60px'}}>{data.title}</h2>
          <p>{data.content}</p>
          <img src={data.image} alt=""/>
        </div>  
        <div>
          <h2>{data.title}</h2>
          <p>{data.content}</p>
          <img src={data.image} alt=""/>
        </div>
      </div>
    )

    ReactDOM.render(div,document.querySelector('#root'))
  </script>
</body>
</html>